<template>
	<div class="container"  @click="handleGalleryClick">
		<div class="wrapper">
			<swiper :options="swiperOption" >
    		<swiper-slide v-for="item,index in imgs"
    						:key = 'index'
    		>
    			<img class="gallery-img" 
    					:src="item" >
   			</swiper-slide>
			 <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>	

</div>
	</div>
</template>
<script>
export default {
  name: 'CommonGallery',
  props:{
  	imgs:{
  		type:Array
  	}
  },
  methods:{
  	handleGalleryClick(){
  		this.$emit('close');
  	}
  },
  data:function(){
  	return {
  		swiperOption:{
  			pagination:'.swiper-pagination',
  			paginationType:'fraction',
  			observeParents:true,
  			observe:true
  		}
  	}
  }
}
</script>
<style scoped>
.container >>> .swiper-container{
	overflow: inherit;
}
	.container{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: #000;
		z-index: 99;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.wrapper{
		width: 100%;
		height: 40%;
	}
	.gallery-img{
		width: 100%;
	}
	.swiper-pagination{
		color: white;
		bottom: -1rem;
	}
</style>
